/* eslint-disable array-callback-return */
import React, { Component } from 'react';
import './changSite.css'
import { Flex, InputItem, Radio } from 'antd-mobile';
import du from '../../uitls/session'
import * as api from '../../uitls/api'
class adddel extends Component {
    constructor() {
        super()
        this.state = {
            datalist: [],
            nan: '先生',
            nv: '女士',
            hc: '',

            text: '',
            // 人
            receipt_people: '',
            // 性别
            receipt_sex: '',
            // 手机号
            receipt_phone: '',
            // 收货地址
            receipt_address: '',
            // 分类
            receipt_label: '',
            // 地址id
            receipt_address_id: '',
            user_id: ''

        }
    }
    fanhui = () => {
        this.props.history.push('/Home/HCsite')
    }
    onChange = (e) => {
        this.setState({
            hc: e.target.children
        })
    }
    onChange2(num) {
        this.setState({
            text: num
        })
    }
    onChange3(k, v) {
        // console.log(k, v);
        this.setState({
            [k]: v
        })
    }
    initdom = () => {
        return this.state.datalist.map((item, i) => {
            return <Radio checked={item.label_id === this.state.text} className="my-radio" onChange={() => this.onChange2(item.label_id)} key={i}>{item.receipt_label}</Radio>
        })
    }
    componentDidMount() {
        this.axios({
            url: api.PDST_Querylabel,
            method: 'post'
        }).then(data => {
            console.log(data);
            if (data.data.code === 200) {
                this.setState({
                    datalist: data.data.data
                })
            }
        })
        let aa = du.getStorage('xinxi')
        this.setState({
            hc: aa.receipt_sex,
            text: aa.label_id,
            receipt_people: aa.receipt_people,
            receipt_phone: aa.receipt_phone,
            receipt_address: aa.receipt_address,
            receipt_address_id: aa.receipt_address_id,
            user_id: aa.user_id,
        })
    }
    baocun = () => {
        console.log(this.state);
        this.axios({
            url: api.POST_Updateaddress,
            method: 'post',
            params: {
                receipt_address: this.state.receipt_address,
                receipt_address_id: this.state.receipt_address_id,
                receipt_people: this.state.receipt_people,
                receipt_phone: this.state.receipt_phone,
                receipt_sex: this.state.hc,
                user_id: this.state.user_id,
                label_id: this.state.text
            }
        }).then(data => {
            console.log(data);
        })
    }
    render() {
        return (
            <div className='adddel_box'>
                <Flex style={{ backgroundColor: '#FFD656' }}>
                    <Flex.Item>
                        <div className='adddel_title_icon'>
                            <i className="iconfont icon-jiantouarrowhead7 " onClick={this.fanhui}></i>
                        </div>
                    </Flex.Item>
                    <Flex.Item>
                        <div className="adddel_sub-title">修改地址</div>
                    </Flex.Item>
                    <Flex.Item>
                        <div className='adddel_add' onClick={this.baocun}>保存</div>
                    </Flex.Item>
                </Flex>
                <div className='adddel_addxinxi_box'>
                    <div className='adddel_input_box'>
                        <InputItem
                            onChange={(e) => this.onChange3('receipt_people', e)}
                            value={this.state.receipt_people}
                            clear
                            ref={el => this.autoFocusInst = el}
                        >联系人:</InputItem>
                    </div>
                    <div className='adddel_input_box' style={{ lineHeight: '50px', textAlign: 'center' }}>
                        <Radio checked={'先生' === this.state.hc} className="my-radio" onChange={this.onChange}>{this.state.nan}</Radio>
                        <Radio checked={'女士' === this.state.hc} className="my-radio" onChange={this.onChange}>{this.state.nv}</Radio>
                    </div>
                    <div className='adddel_input_box'>
                        <InputItem
                            onChange={(e) => this.onChange3('receipt_phone', e)}
                            value={this.state.receipt_phone}
                            clear
                            ref={el => this.autoFocusInst = el}
                        >手机号:</InputItem>
                    </div>
                    <div className='adddel_input_box'>
                        <InputItem
                            onChange={(e) => this.onChange3('receipt_address', e)}
                            value={this.state.receipt_address}
                            clear
                            ref={el => this.autoFocusInst = el}
                        >收货地址:</InputItem>
                    </div>
                    <div className='adddel_input_box'>
                        <InputItem
                            clear
                            ref={el => this.autoFocusInst = el}
                        >门牌号:</InputItem>
                    </div>
                    <div className='adddel_input_box' style={{ lineHeight: '50px', textAlign: 'center' }}>
                        {this.initdom()}
                    </div>
                </div>
            </div>
        );
    }
}

export default adddel;